<template>
  <div class="card-box basic-form">
    <v-dialog :show.sync="dialogVisible" width="70%" title="退租" ref="dialogBack">
      <div v-if="dialogVisible">
        <div class="card-title">合同信息</div>
        <el-form ref="form0" class="form-wrap" size="small">
          <el-form-item label="合同编码">
            <el-input v-halfCharCode v-model="contract.contractCode" disabled />
          </el-form-item>
          <el-form-item label="客户名称">
            <el-input v-halfCharCode v-model="contract.customerName" disabled />
          </el-form-item>
          <el-form-item label="物业名称">
            <el-input v-halfCharCode v-model="contract.propertyNames" disabled />
          </el-form-item>
          <el-form-item label="签定日期">
            <el-date-picker v-model="contract.signDate" type="date" value-format="yyyy-MM-dd" disabled></el-date-picker>
          </el-form-item>
        </el-form>
        <div class="card-title">退租信息</div>
        <el-form ref="form" class="form-wrap" size="small" :rules="rules" :model="formData">
          <el-form-item label="终止类型" prop="endType">
            <el-select clearable v-model="formData.endType" placeholder="请选择">
              <el-option v-for="item in contractEndType" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="合同终止日期" prop="backDate">
            <el-date-picker v-model="formData.backDate" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date"></el-date-picker>
          </el-form-item>
          <!-- <el-form-item label="退租人" prop="backPerson">
            <el-input v-halfCharCode v-model="formData.backPerson" maxlength="20" />
          </el-form-item>
          <el-form-item label="退租人证件号" prop="backCertificateNum">
            <el-input v-halfCharCode v-model="formData.backCertificateNum" maxlength="20" />
          </el-form-item> -->
          <el-form-item label="备注">
            <el-input v-halfCharCode v-model="formData.remarks" maxlength="100" />
          </el-form-item>
          <!-- <el-form-item label="是否已结清费用" prop="feeComplete">
            <br />
            <el-checkbox v-model="formData.feeComplete">已结清所有费用</el-checkbox>
          </el-form-item> -->
        </el-form>
        <div class="card-title">附件</div>
        <el-row :gutter="20">
          <el-col>
            <v-upload type="file" ref="myUpload" modelType="rent-contract" v-model="fileList" :isShowFileList="true" :isView="false" @onSuccess="onSuccess" @onError="onError" />
          </el-col>
        </el-row>
      </div>
      <div slot="foot">
        <el-button @click="back">提交</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </v-dialog>
  </div>
</template>

<script src="./back.js"></script>
<style scoped lang="scss">
.el-row {
  padding: 5px;
}
.basic-form /deep/.el-dialog__body {
  padding-top: 0px;
}
</style>
